<template>
  <div class="face">
    <ul>
      <li v-for="item in aFace" :key="item">
        <img 
          :src="`${imgHttp}public/vendor/layui/images/face/${item}.gif`" 
          alt="" 
          @click.stop="getImage"
        >
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
  name: 'face',
  data() {
    return {
    };
  },
  created() {
    this.getImageFiles();
  },
  computed: {
    ...mapState([
      'aFace'
    ]),
    imgHttp() {
      if (window.ROOT_URL) {
        return window.ROOT_URL;
      } else {
        return window.imgHttp + '/dsc/mobile/';
      }
    }
  },
  methods: {
    ...mapActions([
      'getImageFiles',
      'showFaceDialog'
    ]),
    getImage(e) {
      this.$emit('add-face', e.srcElement.outerHTML);
      this.showFaceDialog({bShow: false});
    }
  }
};
</script>

<style lang="scss" scoped>
@import '../../assets/style/config';
@import '../../assets/style/mixins/common';
.face{
  position: absolute;
  background:#fff;
  padding:.8rem 1rem;
  left: 1rem;
  right: 1rem;
  border-radius: .4rem;
  border:1px solid $border-color-split;
  ul{
    height:22rem;
    overflow-y: scroll;
  }
  li{
    padding:.41rem;
    float:left;
  }
}
</style>


